import 'dart:math' as math;

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:travel/components/homepage/article.dart';
import 'package:travel/components/homepage/video.dart';
import 'package:travel/routes/index.dart';
import 'package:travel/ui/my_app_bar.dart';
import 'package:travel/utils/colors.dart';
import 'package:travel/utils/styles.dart';
import 'package:travel/utils/tools.dart';
import 'package:travel/screen/flutter_screenutil.dart';

class HomepageController extends GetxController with GetTickerProviderStateMixin {
  RxString title = '晚风心里吹'.obs;

  RxDouble barHeight = RxDouble(0.0);

  RxDouble expandedHeight = 365.0.h.obs;

  RxList<String> tabs = RxList(['文章', '视频']);

  late TabController tabController;

  @override
  void onInit() {
    barHeight.value = Get.mediaQuery.padding.top + 60.0.h;
    tabController = TabController(length: tabs.length, vsync: this);
    super.onInit();
  }

  @override
  void onClose() {
    tabController.dispose();
    super.onClose();
  }
}

class HomepageView extends GetView<HomepageController> {
  const HomepageView({super.key});

  @override
  Widget build(BuildContext context) {
    return Obx(() => tabController(context));
  }

  Widget tabController(BuildContext context) {
    return DefaultTabController(
      length: controller.tabs.length, // This is the number of tabs.
      child: Scaffold(
        body: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
              SliverOverlapAbsorber(
                handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                sliver: MyAppBar(
                  pinned: true,
                  automaticallyImplyLeading: false,
                  backgroundColor: Colors.transparent,
                  foregroundColor: Colors.transparent,
                  elevation: 0,
                  expandedHeight: controller.expandedHeight.value,
                  title: Container(
                    alignment: Alignment.centerLeft,
                    padding: EdgeInsets.only(
                        left: 15.w, right: 15.w, top: Get.mediaQuery.viewInsets.top + 15),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        InkWell(
                            onTap: Get.back,
                            child: Icon(Icons.arrow_back_ios, size: 20.w, color: Colors.white)),
                        Wrap(
                          spacing: 20.w,
                          children: [
                            Container(
                              constraints: BoxConstraints.expand(width: 80.w, height: 25.h),
                              alignment: Alignment.center,
                              decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(13.w),
                                  color: ColorsUtils.rgba(170, 170, 170, 0.349019607843137)),
                              child: Wrap(
                                crossAxisAlignment: WrapCrossAlignment.center,
                                children: [
                                  ToolsUtils.assetImageSvg('u2915.svg', width: 10.w, height: 8.h),
                                  Text(' 设置背景', style: StylesUtils.customTextStyle(fontSize: 12.sp))
                                ],
                              ),
                            ),
                            InkWell(
                                onTap: () {
                                  Get.toNamed(RoutePath.homepageSearch);
                                },
                                child: ToolsUtils.assetImageSvg('u253.svg',
                                    width: 18.w, height: 18.h)),
                            InkWell(
                                onTap: () {
                                  ToolsUtils.openShare(context);
                                },
                                child: ToolsUtils.assetImageSvg('u2611.svg',
                                    width: 18.w, height: 20.h)),
                          ],
                        )
                      ],
                    ),
                  ),
                  forceElevated: innerBoxIsScrolled,
                  // flexibleSpace: _MyAppSpace(barHeight: controller.barHeight.value),
                  flexibleSpace: buildFlexibleSpaceBar(context),
                  bottom: PreferredSize(
                    preferredSize: Size.fromHeight(50.h),
                    child: Container(
                      decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.only(
                              topRight: Radius.circular(10.w), topLeft: Radius.circular(10.w))),
                      alignment: Alignment.center,
                      child: SizedBox(
                        width: 180.w,
                        child: ToolsUtils.getClientTabBar(controller.tabs, controller.tabController,
                            isScrollable: false),
                      ),
                    ),
                  ),
                  systemOverlayStyle: SystemUiOverlayStyle.light,
                ),
              ),
            ];
          },
          body: TabBarView(
            controller: controller.tabController,
            children: const [Article(), Video()],
          ),
        ),
      ),
    );
  }

  Widget buildFlexibleSpaceBar(BuildContext context) {
    return FlexibleSpaceBar(
      collapseMode: CollapseMode.parallax,
      background: Column(
        children: [
          Container(
            margin: EdgeInsets.only(top: controller.barHeight.value),
            padding: EdgeInsets.symmetric(vertical: 10.h, horizontal: 15.w),
            child: Row(
              children: [
                CircleAvatar(
                  radius: 40.w,
                  backgroundColor: Colors.white,
                  child: CircleAvatar(
                    radius: 38.w,
                    backgroundImage: const NetworkImage(
                        'https://img0.baidu.com/it/u=2382015383,1174241249&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'),
                  ),
                ),
                Expanded(
                    child: Container(
                  padding: EdgeInsets.only(left: 15.w),
                  child: Column(
                    children: [
                      Container(
                        alignment: Alignment.topLeft,
                        child: Text(
                          '晚风心里吹',
                          style: StylesUtils.customTextStyle(
                            fontSize: 20.sp,
                          ),
                        ),
                      ),
                      Container(
                        alignment: Alignment.topLeft,
                        margin: EdgeInsets.only(top: 12.h, bottom: 6.h),
                        child: Text(
                          'UID：2310100086',
                          style: StylesUtils.customTextStyle(
                              fontSize: 12.sp, color: ColorsUtils.colorCccc),
                        ),
                      ),
                      Container(
                        alignment: Alignment.topLeft,
                        child: Text(
                          'IP属地：北京',
                          style: StylesUtils.customTextStyle(
                              fontSize: 12.sp, color: ColorsUtils.colorCccc),
                        ),
                      )
                    ],
                  ),
                ))
              ],
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: 10.h, bottom: 15.h),
            padding: EdgeInsets.symmetric(horizontal: 15.w),
            alignment: Alignment.centerLeft,
            child: TextButton(
                onPressed: () {
                  Get.toNamed(RoutePath.settingInfoSign);
                },
                child: Text(
                  '点击这里，填写个性签名',
                  style: StylesUtils.customTextStyle(fontSize: 13.sp, color: ColorsUtils.colorF2f2),
                )),
          ),
          Container(
            padding: EdgeInsets.symmetric(horizontal: 15.w),
            alignment: Alignment.centerLeft,
            child: Wrap(
              spacing: 5.w,
              children: [
                Container(
                  alignment: Alignment.center,
                  constraints: BoxConstraints.expand(width: 35.w, height: 20.h),
                  decoration: BoxDecoration(
                      color: ColorsUtils.rgba(215, 215, 215, 0.247058823529412),
                      borderRadius: BorderRadius.circular(10.h)),
                  child: Text(
                    'Lv.1',
                    style:
                        StylesUtils.customTextStyle(color: ColorsUtils.colorEa8e, fontSize: 12.sp),
                  ),
                ),
                Container(
                  alignment: Alignment.center,
                  constraints: BoxConstraints.expand(width: 40.w, height: 20.h),
                  decoration: BoxDecoration(
                      color: ColorsUtils.rgba(215, 215, 215, 0.247058823529412),
                      borderRadius: BorderRadius.circular(10.h)),
                  child: Text.rich(TextSpan(children: [
                    WidgetSpan(
                        child: ToolsUtils.assetImageSvg('u2876.svg', width: 12.w, height: 12.h),
                        alignment: PlaceholderAlignment.middle),
                    TextSpan(
                        text: ' 男',
                        style: StylesUtils.customTextStyle(
                            color: ColorsUtils.colorEc80, fontSize: 12.sp))
                  ])),
                ),
              ],
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: 15.h),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Expanded(
                    child: Row(
                  children: [
                    InkWell(
                      onTap: () {
                        Get.toNamed(RoutePath.follow, arguments: {'index': 0});
                      },
                      child: SizedBox(
                        width: 60.w,
                        child: Column(
                          children: [
                            Container(
                              height: 20.h,
                              alignment: Alignment.center,
                              child: Text(
                                '104',
                                style: StylesUtils.customTextStyle(fontSize: 15.sp),
                              ),
                            ),
                            Container(
                              height: 25.h,
                              margin: EdgeInsets.only(top: 2.h),
                              alignment: Alignment.center,
                              child: Text(
                                '关注',
                                style: StylesUtils.customTextStyle(
                                    fontSize: 12.sp, color: ColorsUtils.colorAaaa),
                              ),
                            )
                          ],
                        ),
                      ),
                    ),
                    InkWell(
                        onTap: () {
                          Get.toNamed(RoutePath.follow, arguments: {'index': 1});
                        },
                        child: SizedBox(
                          width: 60.w,
                          child: Column(
                            children: [
                              Container(
                                height: 20.h,
                                alignment: Alignment.center,
                                child: Text(
                                  '6,357',
                                  style: StylesUtils.customTextStyle(fontSize: 15.sp),
                                ),
                              ),
                              Container(
                                height: 25.h,
                                margin: EdgeInsets.only(top: 2.h),
                                alignment: Alignment.center,
                                child: Text(
                                  '粉丝',
                                  style: StylesUtils.customTextStyle(
                                      fontSize: 12.sp, color: ColorsUtils.colorAaaa),
                                ),
                              )
                            ],
                          ),
                        )),
                    SizedBox(
                      width: 60.w,
                      child: Column(
                        children: [
                          Container(
                            height: 20.h,
                            alignment: Alignment.center,
                            child: Text(
                              '6.1万',
                              style: StylesUtils.customTextStyle(fontSize: 15.sp),
                            ),
                          ),
                          Container(
                            height: 25.h,
                            margin: EdgeInsets.only(top: 2.h),
                            alignment: Alignment.center,
                            child: Text(
                              '获赞',
                              style: StylesUtils.customTextStyle(
                                  fontSize: 12.sp, color: ColorsUtils.colorAaaa),
                            ),
                          )
                        ],
                      ),
                    ),
                  ],
                )),
                Container(
                  padding: EdgeInsets.only(right: 15.w),
                  alignment: Alignment.center,
                  child: Container(
                    constraints: BoxConstraints.expand(width: 80.w, height: 30.h),
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                        color: ColorsUtils.rgba(255, 255, 255, 0),
                        borderRadius: BorderRadius.circular(15.h),
                        border: Border.all(
                            color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorEfef))),
                    child: TextButton(
                        onPressed: () {
                          Get.toNamed(RoutePath.settingInfo);
                        },
                        child: Text(
                          '编辑资料',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.colorF2f2, fontSize: 13.sp),
                        )),
                  ),
                )
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class _MyAppSpace extends StatelessWidget {
  final double barHeight;

  const _MyAppSpace({Key? key, required this.barHeight}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, c) {
        final settings = context.dependOnInheritedWidgetOfExactType<FlexibleSpaceBarSettings>();
        final deltaExtent = settings!.maxExtent - settings.minExtent;
        final t =
            (1.0 - (settings.currentExtent - settings.minExtent) / deltaExtent).clamp(0.0, 1.0);
        final fadeStart = math.max(0.0, 1.0 - kToolbarHeight / deltaExtent);
        const fadeEnd = 1.0;
        final opacity = 1.0 - Interval(fadeStart, fadeEnd).transform(t);
        return Opacity(
          opacity: opacity,
          child: buildChild(),
        );
      },
    );
  }

  Widget buildChild() {
    return Column(
      children: [
        Container(
          padding: EdgeInsets.only(top: barHeight),
        ),
        Container(
          padding: EdgeInsets.symmetric(vertical: 10.h, horizontal: 15.w),
          child: Row(
            children: [
              CircleAvatar(
                radius: 40.w,
                backgroundColor: Colors.white,
                child: CircleAvatar(
                  radius: 38.w,
                  backgroundImage: const NetworkImage(
                      'https://img0.baidu.com/it/u=2382015383,1174241249&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500'),
                ),
              ),
              Expanded(
                  child: Container(
                padding: EdgeInsets.only(left: 15.w),
                child: Column(
                  children: [
                    Container(
                      alignment: Alignment.topLeft,
                      child: Text(
                        '晚风心里吹',
                        style: StylesUtils.customTextStyle(
                          fontSize: 20.sp,
                        ),
                      ),
                    ),
                    Container(
                      alignment: Alignment.topLeft,
                      margin: EdgeInsets.only(top: 12.h, bottom: 6.h),
                      child: Text(
                        'UID：2310100086',
                        style: StylesUtils.customTextStyle(
                            fontSize: 12.sp, color: ColorsUtils.colorCccc),
                      ),
                    ),
                    Container(
                      alignment: Alignment.topLeft,
                      child: Text(
                        'IP属地：北京',
                        style: StylesUtils.customTextStyle(
                            fontSize: 12.sp, color: ColorsUtils.colorCccc),
                      ),
                    )
                  ],
                ),
              ))
            ],
          ),
        ),
        Container(
          margin: EdgeInsets.only(top: 10.h, bottom: 15.h),
          padding: EdgeInsets.symmetric(horizontal: 15.w),
          alignment: Alignment.centerLeft,
          child: TextButton(
              onPressed: () {
                Get.toNamed(RoutePath.settingInfoSign);
              },
              child: Text(
                '点击这里，填写个性签名',
                style: StylesUtils.customTextStyle(fontSize: 13.sp, color: ColorsUtils.colorF2f2),
              )),
        ),
        Container(
          padding: EdgeInsets.symmetric(horizontal: 15.w),
          alignment: Alignment.centerLeft,
          child: Wrap(
            spacing: 5.w,
            children: [
              Container(
                alignment: Alignment.center,
                constraints: BoxConstraints.expand(width: 35.w, height: 20.h),
                decoration: BoxDecoration(
                    color: ColorsUtils.rgba(215, 215, 215, 0.247058823529412),
                    borderRadius: BorderRadius.circular(10.h)),
                child: Text(
                  'Lv.1',
                  style: StylesUtils.customTextStyle(color: ColorsUtils.colorEa8e, fontSize: 12.sp),
                ),
              ),
              Container(
                alignment: Alignment.center,
                constraints: BoxConstraints.expand(width: 40.w, height: 20.h),
                decoration: BoxDecoration(
                    color: ColorsUtils.rgba(215, 215, 215, 0.247058823529412),
                    borderRadius: BorderRadius.circular(10.h)),
                child: Text.rich(TextSpan(children: [
                  WidgetSpan(
                      child: ToolsUtils.assetImageSvg('u2876.svg', width: 12.w, height: 12.h),
                      alignment: PlaceholderAlignment.middle),
                  TextSpan(
                      text: ' 男',
                      style: StylesUtils.customTextStyle(
                          color: ColorsUtils.colorEc80, fontSize: 12.sp))
                ])),
              ),
            ],
          ),
        ),
        Container(
          margin: EdgeInsets.only(top: 15.h),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Expanded(
                  child: Row(
                children: [
                  SizedBox(
                    width: 60.w,
                    child: Column(
                      children: [
                        Container(
                          height: 20.h,
                          alignment: Alignment.center,
                          child: Text(
                            '104',
                            style: StylesUtils.customTextStyle(fontSize: 15.sp),
                          ),
                        ),
                        Container(
                          height: 25.h,
                          margin: EdgeInsets.only(top: 2.h),
                          alignment: Alignment.center,
                          child: Text(
                            '关注',
                            style: StylesUtils.customTextStyle(
                                fontSize: 12.sp, color: ColorsUtils.colorAaaa),
                          ),
                        )
                      ],
                    ),
                  ),
                  SizedBox(
                    width: 60.w,
                    child: Column(
                      children: [
                        Container(
                          height: 20.h,
                          alignment: Alignment.center,
                          child: Text(
                            '6,357',
                            style: StylesUtils.customTextStyle(fontSize: 15.sp),
                          ),
                        ),
                        Container(
                          height: 25.h,
                          margin: EdgeInsets.only(top: 2.h),
                          alignment: Alignment.center,
                          child: Text(
                            '粉丝',
                            style: StylesUtils.customTextStyle(
                                fontSize: 12.sp, color: ColorsUtils.colorAaaa),
                          ),
                        )
                      ],
                    ),
                  ),
                  SizedBox(
                    width: 60.w,
                    child: Column(
                      children: [
                        Container(
                          height: 20.h,
                          alignment: Alignment.center,
                          child: Text(
                            '6.1万',
                            style: StylesUtils.customTextStyle(fontSize: 15.sp),
                          ),
                        ),
                        Container(
                          height: 25.h,
                          margin: EdgeInsets.only(top: 2.h),
                          alignment: Alignment.center,
                          child: Text(
                            '获赞',
                            style: StylesUtils.customTextStyle(
                                fontSize: 12.sp, color: ColorsUtils.colorAaaa),
                          ),
                        )
                      ],
                    ),
                  ),
                ],
              )),
              Container(
                padding: EdgeInsets.only(right: 15.w),
                alignment: Alignment.center,
                child: Container(
                  constraints: BoxConstraints.expand(width: 80.w, height: 30.h),
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                      color: ColorsUtils.rgba(255, 255, 255, 0),
                      borderRadius: BorderRadius.circular(15.h),
                      border: Border.all(
                          color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorEfef))),
                  child: TextButton(
                      onPressed: () {
                        Get.toNamed(RoutePath.settingInfo);
                      },
                      child: Text(
                        '编辑资料',
                        style: StylesUtils.customTextStyle(
                            color: ColorsUtils.colorF2f2, fontSize: 13.sp),
                      )),
                ),
              )
            ],
          ),
        ),
      ],
    );
  }
}
